<template>
  <j-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading" switchFullscreen @ok="handleOk"
    @cancel="handleCancel" cancelText="关闭">

    <a-spin :spinning="confirmLoading">
      <a-card :bordered="false">
        <a-form-model ref="form" :model="model" :rules="validatorRules">
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="billNo" label="单号">
            <span v-if="!model.id">自动生成</span>
            <span v-else>{{ model.billNo }}</span>
          </a-form-model-item>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="selecteddeparts" label="适用机构">
            <a-cascader :options="departModel.departTreeOptions" @change="onDepartChange" :showSearch="true"
              expand-trigger="hover" placeholder="" :fieldNames="fieldNames" style="width: 300px"
              v-model="model.selecteddeparts"/>
          </a-form-model-item>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="memberScope" label="会员范围">
            <a-radio-group v-model="model.memberScope">
              <a-radio value="ALL">全部会员</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="noticeWay" label="清零前通知会员方式">
            <!--  1短信 2人工 3微信 -->
            <a-radio-group v-model="model.noticeWay">
              <a-radio :value="2">人工</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="endDate" label="截止日期">
            <a-date-picker v-model="model.endDate1" format="YYYY-MM-DD" @change="handleEndDate" /> 日期前(含当天)过期的积分清零
          </a-form-model-item>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="jobDate" label="执行清零时间">
            <a-date-picker v-model="model.jobDate1" format="YYYY-MM-DD HH" :show-time="{ format: 'HH' }"
              @change="handleJobDate" :disabled-date="disabledDate"/>
          </a-form-model-item>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark" label="备注">
            <a-input placeholder="" v-model="model.remark" style="width:300px"/>
          </a-form-model-item>
        </a-form-model>
      </a-card>
    </a-spin>
  </j-modal>
</template>

<script>
import { httpAction, postAction } from '@/api/manage'
import { queryDepartTreeList1 } from '@/api/api'
import moment from "moment"

export default {
  name: "PosShopMemberAccountClearModal",
  data() {
    return {
      title: "操作",
      visible: false,
      moment,
      model: {},
      departModel: {
        departTreeOptions: [],
        orgIds: '',
        orgNames: '',
      },
      fieldNames: { label: 'title', value: 'value', children: 'children' },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      isEdit: false,
      validatorRules: {
        selecteddeparts: [{ required: true, message: '必填项' }],
        endDate: [{ required: true, message: '必填项' }],
        jobDate: [{ required: true, message: '必填项' }],
      },
      url: {
        add: "/marketing/posShopMemberAccountClear/add",
        edit: "/marketing/posShopMemberAccountClear/edit",
      },
    }
  },
  created() {
    this.loadDepartTree()
  },
  methods: {
    disabledDate(current) {
      return current && current < moment()
    },
    loadDepartTree() {
      let that = this
      queryDepartTreeList1({ orgTypes: '2' }).then((res) => {
        if (res.success) {
          that.$set(that.departModel, 'departTreeOptions', res.result)
          that.departModel.departTreeOptions.forEach((x) => {
            x['children'] = [{ title: '全部门店', value: '0' }]
          })
        }
      })
    },
    onDepartChange(value, selectedOptions) {
      this.departModel.orgIds = value && value.length > 0 ? value[0] : ''
      this.departModel.orgNames = selectedOptions && selectedOptions.length > 0 ? selectedOptions[0].departName : ''
    },
    add() {
      //初始化默认值
      this.edit({ memberScope: 'ALL', noticeWay: 2 });
    },
    edit(record) {
      this.model = Object.assign({}, record);
      if (this.model.id) {
        this.$set(this.model, 'jobDate1', moment(this.model.jobDate))
        this.$set(this.model, 'endDate1', moment(this.model.endDate))
        this.$set(this.model, 'selecteddeparts', [this.model.orgId, '0'])
        this.isEdit = true
      }else{
        this.isEdit = false
      }
      this.visible = true;
    },
    close() {
      this.$emit('close');
      this.visible = false;
      this.$refs.form.clearValidate();
    },
    handleJobDate(date, dateString) {
      this.model.jobDate = dateString
    },
    handleEndDate(date, dateString) {
      this.model.endDate = dateString
    },
    handleOk() {
      const that = this;
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          if(this.model.jobDate < this.model.endDate){
            this.$message.warning('执行清零时间不能小于截止时间!',5)
            return
          }

          that.confirmLoading = true;
          let httpurl = '';
          let method = 'post';
          if (!this.model.id) {
            httpurl += this.url.add;
          } else {
            httpurl += this.url.edit;
          }
          this.model = Object.assign(this.model, { orgId: this.departModel.orgIds, orgName: this.departModel.orgNames })
          console.log('---model---', this.model)
          httpAction(httpurl, this.model, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
            that.close();
          })
        } else {
          return false;
        }
      })
    },
    handleCancel() {
      this.close()
    },
  }
}
</script>

<style lang="less" scoped></style>